<template>
  <div id="mapV">
  </div>
</template>
 
<script setup>
import {onMounted,ref} from 'vue'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import { fromLonLat ,get} from "ol/proj";
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

  const mapV=ref(null)
  onMounted(()=>{
    var projection = getProjection('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = getWidth(projectionExtent) / 256;
    var resolutions = new Array(18);
    var matrixIds = new Array(18);
    for (var z = 1; z < 19; ++z) {
	    // generate resolutions and matrixIds arrays for this WMTS
	    resolutions[z] = size / Math.pow(2, z);
	    matrixIds[z] = z;
    }
 
      var webKey = '4b57390b9f54b65716e6048e2804d686';
 
      var wmtsUrl_1 = 'https://service.sdmap.gov.cn/tileservice/dsfg_qsb?tk='; //矢量底图
      var wmtsUrl_2 = 'https://service.sdmap.gov.cn/tileservice/dsfg_qsb?tk='; //矢量注记
 
      var wmtsUrl_3 = 'https://service.sdmap.gov.cn/tileservice/sdrasterpubmap?tk='; //影像底图
      var wmtsUrl_4 = 'https://service.sdmap.gov.cn/tileservice/sdrasterpubmap?tk='; //影像注记
 
      var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
      var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记
 
      var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省级以上）
      var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
      var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记
 
      mapV.value = new Map({
	      layers: [
	        new TileLayer({
		        opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_1 + webKey,
		          layer: 'img',  //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
			          origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        }),
	        new TileLayer({
	        	opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_2 + webKey,
		          layer: 'cia',   //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
		        	  origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        })
	      ],
	      target: 'mapV',
	      view: new View({
	        center: fromLonLat([118.674767, 37.434751]),  //东营
	        zoom: 11
	      })
      });
			window.Pipe_Map = mapV.value
  })
</script>
 
<style>
  #mapV{
		height: 100vh;
		width: 100%;
  }
 
</style>